<template>
  <div class="paper-warp">
    <div ref="paperWarp">
      <div class="paper-header" style="" @click="checkHeader">
        <div class="paper-title" style="
        font-family: SimHei;
        font-size: 18pt;
        color: #000;
        font-weight: bold;
        line-height: 1.5;
        text-align: center;">{{ paperDetail.paperName }}</div>
        <!-- <div class="paper-subtitle" style="font-size: 20px;
        color: #000;
        text-align: center;
        line-height: 1.5;
        margin-top: 16px;">{{ paperDetail.paperDes }}</div> -->
        <!-- <div class="paper-desc" style="font-size: 16px;
        color: #000;
        text-align: center;
        line-height: 1.5;
        margin-top: 16px;">{{ paperDetail.paperDes }}</div> -->

        <div class="paper-desc" style="font-family: SimSun; font-size: 12pt;
        color: #000;
        text-align: center;
        line-height: 1.5;
        margin-top: 16px;">考试时间：{{ paperDetail.paperTime }}分钟；总分：{{ paperDetail.paperTotalScore }}</div>
        <div class="paper-matter" style="font-family: SimHei; font-size: 15.5pt;
        color: #000;
        line-height: 1.5;
        margin-top: 16px;">{{ paperDetail.paperAttention }}</div>
      </div>
      <div v-for="(item, index) in paperList" :key="item.optionId" style="margin-top: 30px;" class="paper-list">
        <!-- <template v-else-if="item.paperType === 'bigQuestion'"> -->
        <div class="paper-question-type" style="font-family: SimHei; font-size: 15.5pt;
        color: #000;
        padding: 5px 0;" @click="checkQuestion(item)">
          {{ numToChines(index + 1) }}、{{ item.bigName }} {{ item.bigDesc }}
        </div>
        <div class="paper-question-list">
          <div v-for="(cItem, cIndex) in item.questions" :key="cItem.optionId" class="paper-question-item" @click="checkQuestion(cItem)">
            <paper-question :question-data="cItem" :question-index="cIndex" :active="cItem.optionId === activeId">
              <template slot="tools-button" v-if="!isView">
                <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="handleEdit(index, cIndex)" title="编辑组件"></el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(index, cIndex)" title="删除组件"></el-button>
                <el-button size="mini" type="success" icon="el-icon-bottom" circle @click="handleMoveDown(index, cIndex)" title="向下移动组件"></el-button>
                <el-button size="mini" type="success" icon="el-icon-top" circle @click="handleMoveUp(index, cIndex)" title="向上移动组件"></el-button>
              </template>
            </paper-question>
            <p>&nbsp;</p>
          </div>
        </div>
        <!-- </template> -->
      </div>
    </div>

    <div class="answer-content">
      <div ref="answerWarp">
        <div>
          <div style="font-family: SimHei; font-size: 18pt;
          color: #000;
          font-weight: bold;
          line-height: 1.5;
          text-align: center;">{{ paperDetail.paperName }}</div>

          <div style="font-family: SimSun; font-size: 12pt;
          color: #000;
          text-align: center;
          line-height: 1.5;
          margin-top: 16px;">考试时间：{{ paperDetail.paperTime }}分钟；总分：{{ paperDetail.paperTotalScore }}</div>
          <div style="font-family: SimHei; font-size: 15.5pt;
          color: #000;
          line-height: 1.5;
          margin-top: 16px;">{{ paperDetail.paperAttention }}</div>
        </div>
        <div v-for="(item, index) in paperList" :key="item.optionId" style="margin-top: 30px;" >
          <div style="font-family: SimHei; font-size: 15.5pt;
          color: #000;
          padding: 5px 0;" @click="checkQuestion(item)">
            {{ numToChines(index + 1) }}、{{ item.bigName }} {{ item.bigDesc }}
          </div>
          <div >
            <div v-for="(cItem, cIndex) in item.questions" :key="cItem.optionId" >
              <div
                style="font-family: SimSun; font-size: 15.5pt; line-height: 1.5"
                v-html="formatContentHtml(cItem.answer, cIndex)"
              ></div>
              <p>&nbsp;</p>
            </div>
          </div>
          <!-- </template> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const defaultForm = {
  id: undefined,
};
import PaperQuestion from "./question.vue";
import { numToChines } from "@/utils";
export default {
  components: {
    PaperQuestion,
  },
  props: {
    paperDetail: {
      type: Object,
      default: () => {
        return {};
      },
    },
    paperData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    isView: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      paperList: [],
      activeId: null,
    };
  },
  watch: {
    paperData: {
      handler(newValue) {
        this.renderData(newValue);
      },
      deep: true,
    },
  },
  created() {
    this.renderData(this.paperData);
  },
  methods: {
    numToChines,
    renderData(data) {
      this.paperList = data.map((item) => {
        let options = { ...item };
        options.score = item.questions.reduce((prev, cur) => {
          return prev + cur.score;
        }, 0);
        return options;
      });
      console.log(JSON.parse(JSON.stringify(this.paperList)))
    },
    checkQuestion(data) {
      this.$set(data, "active", true);
      this.activeId = data.optionId;
      this.$emit("changeSelection", data.optionId);
    },
    checkHeader() {
      this.activeId = null;
      this.$emit("checkHeader");
    },

    handleMoveUp(pIndex, cIndex) {
      if (cIndex !== 0) {
        this.$emit('moveUp', {
          pIndex: pIndex,
          cIndex: cIndex,
        })
      }
    },
    handleMoveDown(pIndex, cIndex) {
      if (cIndex !== this.paperList[pIndex].questions.length - 1) {
        this.$emit('moveDown', {
          pIndex: pIndex,
          cIndex: cIndex,
        })
      }
    },
    handleDelete(pIndex, cIndex) {
      this.$confirm("你确认需要删除当前版块吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        lockScroll: false,
      })
        .then(() => {
          this.$emit('delete', {
            pIndex: pIndex,
            cIndex: cIndex,
          })
        })
        .catch(() => {});
    },
    handleEdit(pIndex, cIndex) {
      this.$emit('edit', {
        pIndex: pIndex,
        cIndex: cIndex,
      })
    },
    print() {
      this.$print(this.$refs.paperWarp, {
        isParent: false
      })
    },
    wordExport() {
      this.$wordExport(this.$refs.paperWarp, {
        fileName: this.paperDetail.paperName
      })
    },
    answerWordExport() {
      this.$wordExport(this.$refs.answerWarp, {
        fileName: this.paperDetail.paperName + '-答案'
      })
    },
    formatContentHtml(html, index) {
      let serialNumber = `<span class="serial-number">${index + 1}.</span>`
      let execHtml = /^\s*<[a-zA-Z]+(\s\w+=["'][\w-. :;]*["'])*>/.exec(html);
      if(html && execHtml && execHtml[0]) {
        return `${execHtml[0]} ${serialNumber} ${html.substring(execHtml[0].length)}`
      } else {
        return `${serialNumber} ${html}`
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.paper-warp {
  position: relative;
  width: 100%;
  // height: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  box-sizing: border-box;

  .paper-header {
    .paper-title {
      font-size: 24px;
      color: #363b55;
      font-weight: bold;
      line-height: 1.5;
      text-align: center;
    }
    .paper-subtitle {
      font-size: 20px;
      color: #363b55;
      text-align: center;
      line-height: 1.5;
      margin-top: 16px;
    }
    .paper-desc {
      font-size: 16px;
      color: #363b55;
      text-align: center;
      line-height: 1.5;
      margin-top: 16px;
    }
    .paper-matter {
      font-size: 14px;
      color: #363b55;
      line-height: 1.5;
      margin-top: 16px;
    }
  }

  .paper-list {
    margin-top: 30px;
    .paper-question-type {
      font-size: 16px;
      color: #282f47;
      padding: 5px 0;
    }

    .paper-question-list {
      .paper-question-item {
        margin-top: 10px;
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
}

.answer-content {
  display: none;
}
</style>
